<template>
  <!--element的Tabs组件 选项卡功能-->
  <div class="login">
    <div class="img"></div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="登录" name="first">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="login">登录</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <register></register>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import Register from '@/components/Register'
export default {
  name: 'Login',
  components: {Register},
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      activeName: 'first',
      ruleForm: {
        username: '',
        password: '',
        checkPass: '',
        code: ''
      },
      rules: {
        password: [{required: true, validator: validatePass, trigger: 'blur'}]
      },
      responseResult: []
    }
  },
  methods: {
    // 选项卡切换
    handleClick (tab, event) {},
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
    // 提交表单
    // login () {
    //   this.$axios({
    //     method:'post',
    //     url:'/user/login',
    //     params:{
    //       userName: this.ruleForm.username,
    //       password: this.ruleForm.password
    //     }
    //   })
    //     .then(res => {
    //       console.log("登录成功",res);
    //       if (res.data.state === "200"){
    //         this.$router.replace({path: '/Home'})
    //       }
    //       if (res.data.state === "0"){
    //         alert(res.data.msg)
    //       }
    //     })
    // }
  }
}
</script>

<style scoped>
  .login {
    background: url(../assets/bg.jpg) no-repeat center center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    position: fixed;
  }
  .tabs{
    width: 400px;
    height: 300px;
    margin: 0 auto;
    /*为了垂直居中*/
    position: absolute;
    top: 45%;
    left: 75%;
    transform:translate(-50%,-50%);
  }
  .img{
    /*background: transparent url("../assets/logo1.png") no-repeat -200px -150px;*/
    width: 100px;
    height: 100px;
    margin: 20px;
  }

</style>
